<template>
  <div class="user-index WH100">
    <el-container style="height: 100%">

      <el-scrollbar>
        <menu-aside/>
      </el-scrollbar>
      <!-- 右侧-->
        
      <!-- 主体 -->
      <!-- <el-scrollbar> -->
      <el-main>
        <transition name="fade">
          <router-view/>
        </transition>
      </el-main>
      <!-- </el-scrollbar> -->
      
      <!-- 左侧 -->
      <info-aside/>

    </el-container>
  </div>
</template>
 
<script>
import MenuAside from './components/MenuAside'
import InfoAside from './components/InfoAside'
export default {
  components: {
    MenuAside,
    InfoAside
  },
  data() {
    return {
      name: localStorage.username
    }
  },
  methods: {
    
  },
}
</script>

<style lang="scss">
.user-index {
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
  .fade-enter-active {
    transition: opacity .5s;
  }
  .fade-enter {
    opacity: 0;
  }
  .el-scrollbar {
    border-right: solid 1px #e6e6e6;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
}

</style>